<template>
  <div class="header-container">
    <van-nav-bar
      :left-text="leftText"
      :left-arrow="headerNavBackTextShow"
      @click-left="onClickLeft"
    >
      <template slot="title">
        <div class="title">黑马程序员.vant</div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'navbar',
  computed: {
    leftText () {
      const res = this.$store.state.headerNavBackTextShow
      console.log(this.$store.state.headerNavBackTextShow)
      return res ? '返回' : ''
    },
    ...mapState(['headerNavBackTextShow'])
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scope>
.header-container {
  .van-nav-bar {
    background-color: #1989fa;
    .title,
    .van-icon,
    .van-nav-bar__text {
      color: #fff;
    }
  }
}
</style>
